<template>
  <div>
    <van-search
      v-model="searchWord"
      shape="round"
      background="lightblue"
      placeholder="请输入搜索关键词"
      @search="search"
      @input="yuxian"
      @focus="showDiv"
    >
      <template #action> <div @click="search"></div></template>
    </van-search>
    <div v-show="isShow">
      <div v-for="item in movieList" :key="item">
        <van-cell :value="item.movie_name" @click="searchByCell(item.movie_name)"/>
      </div>
      <van-cell v-if="searchWord"><a :href="doubansrc+searchWord">跳转到豆瓣</a></van-cell>
    </div>
    <van-tabs v-model="active" animated sticky>
      <van-tab title="院线电影">
        <!-- {{this.list}} -->
        <div v-for="item in list" :key="item.index" v-lazy="item">
          <moviecard
            :moviename="item.movie_name"
            :img_url="item.movie_image"
            :grade="item.douban_grade"
            :product_year="item.product_year"
            :acts="item.acts"
            :movie_id="item.movie_id"
          ></moviecard>
        </div>
      </van-tab>
      <van-tab title="豆瓣高分">
        <div v-for="item in list1" :key="item.index" v-lazy="item">
          <moviecard
            :moviename="item.movie_name"
            :img_url="item.movie_image"
            :grade="item.douban_grade"
            :product_year="item.product_year"
            :acts="item.acts"
            :movie_id="item.movie_id"
          ></moviecard>
        </div>
      </van-tab>
      <van-tab title="华语">
        <div v-for="item in list2" :key="item.index" v-lazy="item">
          <moviecard
            :moviename="item.movie_name"
            :img_url="item.movie_image"
            :grade="item.douban_grade"
            :product_year="item.product_year"
            :acts="item.acts"
            :movie_id="item.movie_id"
          ></moviecard>
        </div>
      </van-tab>
      <van-tab title="欧美">
        <div v-for="item in list3" :key="item.index" v-lazy="item">
          <moviecard
            :moviename="item.movie_name"
            :img_url="item.movie_image"
            :grade="item.douban_grade"
            :product_year="item.product_year"
            :acts="item.acts"
            :movie_id="item.movie_id"
          ></moviecard>
        </div>
      </van-tab>
      <van-tab title="韩国">
        <div v-for="item in list4" :key="item.index" v-lazy="item">
          <moviecard
            :moviename="item.movie_name"
            :img_url="item.movie_image"
            :grade="item.douban_grade"
            :product_year="item.product_year"
            :acts="item.acts"
            :movie_id="item.movie_id"
          ></moviecard>
        </div>
      </van-tab>
      <van-tab title="日本">
        <div v-for="item in list5" :key="item.index" v-lazy="item">
          <moviecard
            :moviename="item.movie_name"
            :img_url="item.movie_image"
            :grade="item.douban_grade"
            :product_year="item.product_year"
            :acts="item.acts"
            :movie_id="item.movie_id"
          ></moviecard>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
import { Search, Toast } from "vant";
import axios from "axios";
import moviecard from "../components/movieCard";
export default {
  name: "Home",
  components: {
    moviecard,
  },
  data() {
    return {
      active: 0,
      searchWord: "",
      isShow:false,
      // moviename:'电影名',
      list: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      movieList : [],
      doubansrc:"https://m.douban.com/search/?query="
    };
  },
  created() {
    let username = localStorage.getItem("username");
    // alert(username)
    Toast({
      message: username + "，欢迎你",
      position: "top",
    });
    this.searchAll();
  },
  activated: function() {
    this.searchAll();
  },
  methods: {
    logined() {
      localStorage.getItem("token");
    },
    search() {
      // alert(1)
      this.$router.push({
        name: "infoSearch",
        params: { keyword: this.searchWord },
      });
    },
    searchAll() {
      axios.get("http://localhost:8888/movie/showing").then((res) => {
        console.log(res);
        this.list = res.data;
      });
      axios.get("http://localhost:8888/movie/showingGood").then((res) => {
        console.log(res);
        this.list1 = res.data;
      });
      axios.get("http://localhost:8888/movie/showingChina").then((res) => {
        console.log(res);
        this.list2 = res.data;
      });
      axios.get("http://localhost:8888/movie/showingOuMei").then((res) => {
        console.log(res);
        this.list3 = res.data;
      });
      axios.get("http://localhost:8888/movie/showingKorea").then((res) => {
        console.log(res);
        this.list4 = res.data;
      });
      axios.get("http://localhost:8888/movie/showingJapan").then((res) => {
        console.log(res);
        this.list5 = res.data;
      });
      // source.cancel("Operation canceled by the user.");
    },
    yuxian(){
      if(this.searchWord === ''){
          this.isShow = false;
        }else{
          this.isShow = true;
        }
      axios.get(`http://localhost:8888/movie/yuxianSearch?word=${this.searchWord}`).then(res=>{
        console.log(res)
        this.movieList = res.data;
        
      })
    },
    showDiv(){
      // if(this.searchWord){
      //   this.isShow = true
      // }
      // if(this.searchWord === ''){
      //   this.movieList = []
      // }
      // else{
      //   this.isShow = true;
      //   this.movieList = [];
      // }
      this.isShow = true
    },
    searchByCell(word){
      this.$router.push({
        name: "infoSearch",
        params: { keyword: word },
      });
    }
  },
};
</script>
<style lang="less" scoped>
/deep/ .van-tab__pane {
  height: 100% - 50px;
}
.van-cell{
  margin:0px !important;

  box-shadow: 0px 0px 3px #333;
}

</style>